<template>
    <div class="dashboard">
        <PagePanel class="top" title="商家首页">
            <div class="card-item">
                <div class="card-item-row" :style="{background:'#35BFA8'}">
                    <div class="card-item-row-left">
                        <img src="../../assets/image/icon-001.png" width="56" height="56" />
                    </div>
                    <div class="card-item-row-right">
                        <div class="text">
                            <h2>{{infoData.altReceptsBalance}}</h2>
                            <div class="title">今日收款余额</div>
                        </div>
                    </div>
                </div>
                <div class="card-item-row" :style="{background:'#FFA76C'}">
                    <div class="card-item-row-left">
                        <img src="../../assets/image/icon-002.png" width="56" height="56" />
                    </div>
                    <div class="card-item-row-right">
                        <div class="text">
                            <h2>{{infoData.altUnsettleAmount}}</h2>
                            <div class="title">待清算资金</div>
                        </div>
                    </div>
                </div>
                <div class="card-item-row" :style="{background:'#65A8FF'}">
                    <div class="card-item-row-left">
                        <img src="../../assets/image/icon-003.png" width="56" height="56" />
                    </div>
                    <div class="card-item-row-right">
                        <div class="text">
                            <h2>{{infoData.altSettleAmount}}</h2>
                            <div class="title">可结算资金</div>
                        </div>
                    </div>
                </div>
            </div>
        </PagePanel>
        <PagePanel title="支付额" class="bottom">
            <div class="payment">
                <div class="payment-left">
                    <div id="pieChart" :style="{width:'100%',height:'340px'}"></div>
                </div>
                <div class="payment-right">
                    <div id="lineChart" :style="{width:'100%',height:'340px'}"></div>
                </div>
            </div>
        </PagePanel>
    </div>
</template>

<script>
import PagePanel from "@/components/panel/PagePanel";
export default {
    data(){
        return {
            infoData:{
                altReceptsBalance:0,
                altSettleAmount:0,
                altUnsettleAmount:0,
                dayAmount:0,
                list:[],
                monthAmount:2,
            },
            pieChart:{
                series: [
                    {
                        name: '支付金额',
                        type: 'pie',
                        radius: [80, 110],
                        center: ['50%', '50%'],
                        color:['#35BFA8', '#FFA76C'],
                        data: [
                            { value: 0, name: '今日支付金额' },
                            { value: 0, name: '本月支付金额' },
                        ]
                    }
                ]
            },
            lineChart:{
                grid:{
                    top:'10%',
                    right:'5%',
                    left:'10%',
                    bottom:'10%',
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    boundaryGap: false,
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        color:'#4DB673',
                        type: 'line',
                        showSymbol: false,
                        data: [],
                    }
                ]
            },
        }
    },
    mounted() {
        this.initData();
        window.addEventListener('resize', this.onResize, false);
    },
    methods:{
        // 初始化数据
        initData(){
            this.$http.get('/api/altmch/homePage', {}).then(result => {
                if(result.code == 200){
                    this.infoData = result.data;
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 饼图
        initPieChart(data){
            this.pieChart.series[0].data[0].value = data.dayAmount;
            this.pieChart.series[0].data[0].name = '今日支付金额：'+data.dayAmount;
            this.pieChart.series[0].data[1].value = data.monthAmount;
            this.pieChart.series[0].data[1].name = '本月支付金额：'+data.monthAmount;
            let pieChart = this.$echarts.init(document.getElementById('pieChart'));
            pieChart.setOption(this.pieChart);
            window.addEventListener('resize', _ => {
                pieChart.resize();
            }, false);
        },
        // 折线图
        initLineChart(list){
            this.lineChart.xAxis.data = list.map(result => { return result.day; });;
            this.lineChart.series[0].data = list.map(res => { return res.amount; });
            let lineChart = this.$echarts.init(document.getElementById('lineChart'));
            lineChart.setOption(this.lineChart);
            window.addEventListener('resize', _ => {
                lineChart.resize();
            }, false);
        },
        // 监听窗口变化
        onResize(e){},
    },
    watch:{
        infoData(data){
            this.initPieChart(data);
            this.initLineChart(data.list);
        },
    },
    components:{
        PagePanel
    }
}
</script>

<style lang="less" scoped>
.dashboard{
    .top{
        .card-item{
            display:flex;
            flex-direction:row;
            justify-content: space-between;
            height:127px;
            .card-item-row{
                width:32.5%;
                border-radius: 12px;
                display:flex;
                flex-direction:row;
                justify-content:space-between;
                overflow: hidden;
                .card-item-row-left{
                    width:50%;
                    display:grid;
                    align-items:center;
                    justify-items:center;
                }
                .card-item-row-right{
                    width:50%;
                    display:grid;
                    align-items:center;
                    .text{
                        h2{
                            font-size: 38px;
                            font-family: Impact;
                            color: #FFFFFF;
                            font-weight: normal;
                            margin:0px;
                        }
                        .title{
                            font-size: 16px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #FFFFFF;
                            margin-top:10px;
                        }
                    }
                }
            }
        }
    }
    .bottom{
        .payment{
            display:flex;
            flex-direction:row;
            justify-content:space-between;
            .payment-left{
                width:32.5%;
                height:345px;
                background:#fff;
                border-radius: 12px;
            }
            .payment-right{
                width:66%;
                height: 345px;
                background: #FFFFFF;
                border-radius: 12px;
            }
        }
    }
}
</style>
